
<template>
  <div>
    <el-breadcrumb :separator-icon="ArrowRight">
      <el-breadcrumb-item>首页</el-breadcrumb-item>
      <el-breadcrumb-item><b>学生情况</b></el-breadcrumb-item>
    </el-breadcrumb>
  </div>
<!--搜索框 教师查  -->
  <!--  搜索框-->
  <div style="margin:40px 20px 20px 20px">
    <el-form :inline="true" ref="searchFormRef" :model="searchFormModel" class="demo-form-inline" style="margin-top: 20px">
      <el-form-item label="姓名" prop="sname">
        <el-input v-model="searchFormModel.sname" placeholder="请输入学生姓名" clearable />
      </el-form-item>
      <el-form-item label="学号" prop="sid">
        <el-input v-model="searchFormModel.sid" placeholder="请输入学号" clearable />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="searchOnSubmit">
          <el-icon><Search /></el-icon>  查询
        </el-button>
      </el-form-item>
    </el-form>
  </div>
  <!--  数据表格-->
  <div style="margin:20px">
    <el-table :data="studentInfo" stripe border style="width: 100%">
      <el-table-column prop="sid" label="学号"/>
      <el-table-column prop="sname" label="姓名"/>
      <el-table-column prop="gender" label="性别"  />
      <el-table-column prop="dept" label="院系"  :formatter="attributeFormatter"/>
      <el-table-column prop="email" label="邮箱" />
      <el-table-column prop="phone" label="联系方式" />
    </el-table>
  </div>
  <!--  分页-->
  <div class="page">
    <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[8,10]"
        :small="small"
        :disabled="disabled"
        :background="background"
        layout="sizes, prev, pager, next"
        :total="totals"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
    />
  </div>
</template>
<script setup>

import {ArrowRight, Search} from "@element-plus/icons-vue";
import {onMounted, reactive, ref} from "vue";
import request from "../../../utils/freshman";

onMounted(() => {
  getDept();
  info();
  getFreshmanT();
})
//对应的值
const deptValue = ref([]);
const getDept = () => {
  request({
    url: '/dept/all',
    method: 'get'
  }).then((req) => {
    // console.log(req)
    if (200 == req.data.errorCode) {
      deptValue.value = req.data.data;
    }
  })
}
const attributeFormatter = (row, column, cellValue) => {
  for (let i = 0; i < deptValue.value.length; i++) {
    if (cellValue == deptValue.value[i].deptid) {
      return deptValue.value[i].deptname
    }
  }
}
//分页
const currentPage = ref(1)
const pageSize = ref(8)
const small = ref(false)
const background = ref(false)
const disabled = ref(false)
let totals = ref(0);
const studentInfo = ref([])

const userInfo=reactive({
  'tid':'',
  'dept':''
})
const info=()=>{
  //从sessionstorage取出数据
  const loginUser=sessionStorage.getItem("loginUser");
  if (loginUser){
    //更新userInfo.username
    const userobj=JSON.parse(loginUser)
    userInfo.tid=userobj.tid;
    userInfo.dept=userobj.dept;
  }
}
//搜索
const searchFormRef=ref();
const searchFormModel=reactive({
  sname:'',
  sid:'',
})
const getFreshmanT = () => {
  const params = {
    pageNum: currentPage.value,
    pageSize: pageSize.value,
    // 初始时不包含其他参数
  };
  if (searchFormModel.sname && searchFormModel.sname.trim() !== ''){
    params.sname=searchFormModel.sname.trim();
  }
  if (searchFormModel.sid && searchFormModel.sid.trim() !== ''){
    params.sid=searchFormModel.sid.trim();
  }
  if (userInfo.dept != null){
    params.dept=userInfo.dept
  }
  request({
    url: '/admin/freshman/page',
    method: 'get',
    params,
  }).then((req) => {
    console.log(req)
    if (200 == req.data.errorCode) {
      studentInfo.value = req.data.data.records;
      totals.value = req.data.data.total;
    }
  })
}
const searchOnSubmit=()=>{
  getFreshmanT()
}
const handleSizeChange = (val) => {
  pageSize.value = val;
  getFreshmanT()
}
const handleCurrentChange = (val) => {
  currentPage.value = val;
  getFreshmanT()
}
</script>
<style scoped>
.el-breadcrumb {
  font-size: 18px;
  margin: 20px;
}

.page {
  margin-left: 30%;
}
</style>